<template>
	<view class="flex-col list-item section_13">
	  <view class="flex-row space-x-20" @click="jump(info)">
	    <view class="flex-col items-center text-wrapper view_29"><text class="font_12">{{['发明','实用','外观'][info.patentType]}}</text></view>
	    <text class="font_4 text_7">{{info.patentName || '-'}}</text>
	  </view>
	  <view class="flex-row justify-between group_10">
	    <view class="flex-row">
	      <text class="font_6">专利号：</text>
	      <text class="font_7 text_9">{{info.patentNo || '-'}}</text>
	    </view>
	    <view class="flex-row">
	      <text class="font_6">申请日：</text>
	      <text class="font_7 text_10">{{ info.applyDate || '-'}}</text>
	    </view>
	  </view>
	  <view class="flex-row justify-between group_11">
	    <view class="flex-row group_12 view_30">
	      <text class="font_6">主分类号：</text>
	      <text class="font_13 text_11 text_22">{{info.mainClassification ||'-'}}</text>
	    </view>
	    <view class="flex-row group_13 view_31">
	      <text class="font_6">授权日：</text>
	      <text class="font_7 text_12">{{info.authDate||'-'}}</text>
	    </view>
	  </view>
	  <view class="flex-row group_14 view_32">
	    <text class="font_6">申请人：</text>
	    <text class="font_8">{{info.proposer||'-'}}</text>
	  </view>
	  <view class="flex-row justify-between group_15 view_33" v-if="info.unitPrice">
	    <view class="flex-row group_16">
	      <text class="font_6">价格：</text>
	      <view class="group_17">
	        <text class="font_9">{{info.unitPrice}}元</text>
	        <text class="font_11 text_14">起</text>
	      </view>
	      <text class="font_10 text_13">可议价</text>
	    </view>
	    <view class="flex-row space-x-10 section_5" @click="openPop(true)">
	      <image
	        class="image_13"
	        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648545818782366453.png"
	      />
	      <text class="font_2">立即询价</text>
		  <u-popup :show="rightPop" mode="bottom" :closeOnClickOverlay="false" :closeable="true" @close="openPop(false)">
		  	<view class="flex-col space-y-53 section">
		  	  <text class="font_1 text">立即询价</text>
		  	  <view class="flex-col space-y-51">
		  	    <text class="button">157 5538 7045</text>
		  	    <view class="flex-row justify-center space-x-20 button_2">
		  	      <image
		  	        class="image"
		  	        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648535725988026642.png"
		  	      />
		  	      <text class="font_1 text_2" @click="phone">立即拨打电话</text>
		  	    </view>
		  	  </view>
		  	</view>
		  </u-popup>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rightPop:false,
			};
		},
		props:['info'],
		onLoad(option) {
			
		},
		created() {
			console.log(this.info)
		},
		methods:{
			openPop(value){
				this.rightPop = value;
			},
			jump(info) {
				uni.navigateTo({
					url:`../index/newdetails?patentNo=${info.patentNo}`
				})
			},
			phone(){
				uni.makePhoneCall({
					phoneNumber: '15755387045' //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-item {
  padding: 35rpx 28rpx 36rpx 30rpx;
  background-color: #ffffff;
  .space-x-20 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-left: 20rpx;
    }
    .text-wrapper {
      margin-bottom: 4rpx;
      padding: 2rpx 0 4rpx;
      background-color: #ffffff;
      border-radius: 4rpx;
      width: 70rpx;
      height: 26rpx;
      border: solid 1rpx #2f87f2;
      .font_12 {
        font-size: 19rpx;
        font-family: Microsoft YaHei;
        line-height: 18rpx;
        color: #37c637;
      }
    }
    .view_29 {
      border: solid 1rpx #37c637;
      flex-shrink: 0;
    }
    .font_4 {
      font-size: 30rpx;
      font-family: Microsoft YaHei;
      line-height: 30rpx;
      color: #5677fc;
    }
    .text_7 {
      line-height: 31rpx;
    }
  }
  .group_10 {
    margin-top: 19rpx;
    .text_9 {
      margin-top: 3rpx;
    }
    .text_10 {
      margin-top: 3rpx;
    }
  }
  .group_11 {
    margin-top: 25rpx;
    .group_12 {
      flex: 1 1 auto;
      .font_13 {
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        line-height: 24rpx;
        color: #444444;
      }
      .text_11 {
        margin-top: 3rpx;
        line-height: 25rpx;
      }
      .text_22 {
        line-height: initial;
      }
    }
    .view_30 {
      flex: initial;
    }
    .group_13 {
      flex-shrink: 0;
      .text_12 {
        margin-top: 3rpx;
      }
    }
    .view_31 {
      flex-shrink: initial;
    }
  }
  .font_6 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 26rpx;
    color: #777777;
  }
  .font_7 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 21rpx;
    color: #444444;
  }
  .group_14 {
    margin-top: 23rpx;
    padding: 0 3rpx;
    .font_8 {
      font-size: 26rpx;
      font-family: Microsoft YaHei;
      line-height: 26rpx;
      color: #444444;
    }
  }
  .view_32 {
    margin-top: 24rpx;
  }
  .group_15 {
    margin-top: 8rpx;
    .group_16 {
      align-self: center;
      .group_17 {
        line-height: 24rpx;
        height: 24rpx;
        .font_9 {
          font-size: 26rpx;
          font-family: Microsoft YaHei;
          line-height: 24rpx;
          color: #ff7607;
        }
        .font_11 {
          font-size: 19rpx;
          font-family: Microsoft YaHei;
          line-height: 18rpx;
          color: #ff7607;
        }
        .text_14 {
          font-size: 18rpx;
          line-height: 17rpx;
        }
      }
      .font_10 {
        font-size: 26rpx;
        font-family: Microsoft YaHei;
        line-height: 26rpx;
        color: #ff7607;
      }
      .text_13 {
        margin-left: 35rpx;
      }
    }
    .space-x-10 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 10rpx;
      }
      .image_13 {
        flex-shrink: 0;
        width: 35rpx;
        height: 28rpx;
      }
      .font_2 {
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        line-height: 28rpx;
        color: #ffffff;
      }
    }
    .section_5 {
      margin-right: 5rpx;
      padding: 16rpx 29rpx 15rpx 32rpx;
      background-color: #37c637;
      border-radius: 4rpx;
      height: 60rpx;
    }
  }
  .view_33 {
    margin-top: 6rpx;
  }
}
.section_13 {
  padding: 34rpx 28rpx 37rpx 30rpx;
}
.space-y-53 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 53rpx;
  }
  .font_1 {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    line-height: 30rpx;
  }
  .text {
    align-self: center;
    color: #141414;
  }
  .space-y-51 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 51rpx;
    }
    .button {
      align-self: center;
      color: #58be6b;
      font-size: 40rpx;
      font-family: Microsoft YaHei;
      line-height: 40rpx;
    }
    .space-x-20 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 20rpx;
      }
      .image {
        width: 33rpx;
        height: 28rpx;
      }
      .text_2 {
        color: #ffffff;
      }
    }
    .button_2 {
      margin-right: 4rpx;
      padding: 29rpx 0;
      background-color: #37c637;
      border-radius: 4rpx;
    }
  }
}
.section {
  padding: 49rpx 18rpx 62rpx;
  background-color: #ffffff;
}
</style>